/*
  学习目标：hooks补充 - useLocation  - useParams

  useLocation
  作用: 获取location对象
  区别: 效果等价于props.location; ✅可以在任意函数式组件中使用

  useParams
  作用: 获取动态路由中params对象
  区别: 效果等价于props.match.params; 
    1. ✅可以在任意函数式组件中使用
    2. 简化获取的方式
 
*/

import React from 'react';

import {
  BrowserRouter as Router,
  Route,
  Switch,
  useLocation,
  useParams,
} from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/home/:xxx" component={Home} />
        <Route path="/main" component={Main} />
      </Switch>
      <Footer />
    </Router>
  );
}

function Home() {
  const res = useParams();
  console.log('res  ----->  ', res);
  return <h1>home</h1>;
}

function Main() {
  return <h2>Main</h2>;
}

function Footer() {
  const location = useLocation();
  console.log('location  ----->  ', location);
  return <h3>Footer</h3>;
}
